<template>
	<view class="content">
		<u-search placeholder="请输入课程名" v-model="keyword"></u-search>
		<view class="swiper-wrap">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="section-wrap">
			<u-section title="今日热门" sub-title="查看更多"></u-section>
		</view>
		<view @click="goPage()" class="imooc-card">
			<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
			<view class="imooc-card-course">
				<view class="course-title">
					Vue从入门到放弃
				</view>
				<view class="course-author">
					x老师
				</view>
				<view class="course-info">
					<text>共88课时</text><text>|</text><text>800人在学</text>
				</view>
			</view>
		</view>
		<view class="imooc-card">
			<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
			<view class="imooc-card-course">
				<view class="course-title">
					Vue从入门到放弃
				</view>
				<view class="course-author">
					x老师
				</view>
				<view class="course-info">
					<text>共88课时</text><text>|</text><text>800人在学</text>
				</view>
			</view>
		</view>
		<view class="imooc-card">
			<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
			<view class="imooc-card-course">
				<view class="course-title">
					Vue从入门到放弃
				</view>
				<view class="course-author">
					x老师
				</view>
				<view class="course-info">
					<text>共88课时</text><text>|</text><text>800人在学</text>
				</view>
				<view class="video">
				
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			goPage(){
				uni.navigateTo({
					
					url:'../course/course'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 32rpx;
	}
	.swiper-wrap{
		margin-top: 14rpx;
	}
	.section-wrap{
		margin-top: 60rpx;
	}
	.imooc-card{
		display: flex;
		font-family: "PingFang-SC-Bold";
		background: #F9F9F7;
		padding: 4px;
		margin-top: 40rpx;
		image{
			flex: 2;
			height: 168rpx;
			border-radius: 4rpx;
		}
		.imooc-card-course{
			flex: 3;
			margin-left: 32rpx;
			.course-title{
				color: "#333333";
				font-size: 32rpx;
				font-weight: 500;
			}
			.course-author{
				font-family: "PingFang-SC-Regular";
				margin-top: 12rpx;
			}
			.course-info{
				margin-top: 8rpx;
			}
		}
	}

</style>
